﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <!-- openlayers -->
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
    <!-- bootstrap -->
    <!-- <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.3/build/ol.js"></script> -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.3/css/ol.css"> -->

    <link href="lib/bootstrap/css/bootstrap.bundle.min.js" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <style>
        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            left: -50px;
            min-width: 280px;
            bottom: 13px;
        }
        
        .ol-popup::after,
        .ol-popup::before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        
        .ol-popup::after {
            border-top-color: white;
            border-width: 10px;
            left: 40px;
            margin-left: -10px;
        }
        
        .ol-popup::before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        
        .ol-popup-closer::after {
            content: " X ";
        }
    </style>
</head>

<body>
    <!-- style="width:800px;height:800px;" -->
    <div id="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
    <!-- <button id="zoomIn" class="btn btn-primary">放大</button> -->
    <!-- <button id="zoomOut" class="btn btn-primary">缩小</button> -->
    <!-- <button id="toLeft" class="btn btn-primary">左移</button> -->
    <!-- <button id="toRight" class="btn btn-primary">右移</button> -->
    <!-- <button id="toTop" class="btn btn-primary">上移</button> -->
    <!-- <button id="toBottom" class="btn btn-primary">下移</button> -->
    <!-- <button id="toBeijing" class="btn btn-primary">平移至北京</button> -->
    <script>
        var container = document.getElementById("popup");
        var content = document.getElementById("popup-content")
        var closer = document.getElementById("popup-closer")
        var overlay = new ol.Overlay({
            element: container,
            autoPan: true,
            autoPanAnimation: {
                duration: 250
            }
        })
        var cillayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        // let self = this;
        var map = new ol.Map({
            target: 'map',
            // 设置地图图层
            layers: [
                new ol.layer.Tile({
                    // 创建一个使用Open Street Map地图源的瓦片图层
                    // source: new ol.source.OSM(),
                    source: new ol.source.XYZ({
                            url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
                        })
                        // style: self.deviceIconStylew, //图片样式设置
                        // zIndex: 9999,
                }),
                layer,
                cillayer,
                // new ol.layer.Vector({
                //     title: 'add Layer',
                //     source: new ol.source.Vector({
                //         // features: ol.format.GeoJSON().readFeatures('lib/json/test.geojson'),
                //         // projection: 'EPSG:4326',
                //         // url: "lib/json/test.geojson", //GeoJSON的文件路径，用户可以根据需求而改变
                //         // format: new ol.format.GeoJSON()
                //     }),
                //     style: styleFunction
                // })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([121.574524, 29.815207]),
                zoom: 12,
                zIndex: -1
                    // projection: 'EPSG:4326',
                    // center: [120, 30],
                    // zoom: 8
                    // projection: 'EPSG:3857',
                    // center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                    // zoom: 15
            }),

        });
        map.addOverlay(overlay);
        // 关闭popup
        closer.onclick = function() {
            overlay.setPosition(undefined);
            closer.blur();
            return false;
        };
        // 监听鼠标单击事件，点击feature后弹出popup
        map.on('click', function(e) {
            var coordinate = e.coordinate;
            var feature = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
                return feature;
            });
            if (feature) {
                overlay.setPosition(e.coordinate);
                // var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));
                if (feature.get('name') === '浙大宁波理工学院站') {
                    console.log(feature.get('name'));
                    content.innerHTML = "<code>区域：</code><code>" + '浙大宁波理工学院站' + "</code> <br>";
                } else if (feature.get('name') === '鼓楼站') {
                    console.log(feature.get('name'));
                    content.innerHTML = "<code>区域：</code><code>" + '鼓楼站' + "</code> <br>";
				} else if (feature.get('name') === '解放南路大梁街口站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '解放南路大梁街口站' + "</code> <br>";
                } else if (feature.get('name') === '开明街站') {
                    console.log(feature.get('name'));
                    content.innerHTML = "<code>区域：</code><code>" + '开明街站' + "</code> <br>";
				} else if (feature.get('name') === '灵桥西站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '灵桥西站' + "</code> <br>";
				} else if (feature.get('name') === '灵桥东站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '灵桥东站' + "</code> <br>";
				} else if (feature.get('name') === '琴桥东站') {
					console.log(feature.get('name'));
					content.innerHTML = "<code>区域：</code><code>" + '琴桥东站' + "</code> <br>";
				} else if (feature.get('name') === '贺丞路站') {
					console.log(feature.get('name'));
					content.innerHTML = "<code>区域：</code><code>" + '贺丞路站' + "</code> <br>";
				} else if (feature.get('name') === '日月星城站') {
					console.log(feature.get('name'));
					content.innerHTML = "<code>区域：</code><code>" + '日月星城站' + "</code> <br>";
				} else if (feature.get('name') === '永达路站') {
					 console.log(feature.get('name'));
					 content.innerHTML = "<code>区域：</code><code>" + '永达路站' + "</code> <br>";
				} else if (feature.get('name') === '香格里拉城市花园站') {
					 console.log(feature.get('name'));
					 content.innerHTML = "<code>区域：</code><code>" + '香格里拉城市花园站' + "</code> <br>";
				} else if (feature.get('name') === '天童北路站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '天童北路站' + "</code> <br>";
				} else if (feature.get('name') === '和邦大厦站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '和邦大厦站' + "</code> <br>";
				} else if (feature.get('name') === '四明中路地铁站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '四明中路地铁站' + "</code> <br>";
				} else if (feature.get('name') === '万达广场站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '万达广场站' + "</code> <br>";
				} else if (feature.get('name') === '华贸外国语学院站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '华贸外国语学院站' + "</code> <br>";
				} else if (feature.get('name') === '鄞州区政府站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '鄞州区政府站' + "</code> <br>";
				} else if (feature.get('name') === '浙江药科职业大学站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '浙江药科职业大学站' + "</code> <br>";
				} else if (feature.get('name') === '万里学院北站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '万里学院北站' + "</code> <br>";
				} else if (feature.get('name') === '万里学院东站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '万里学院东站' + "</code> <br>";
				} else if (feature.get('name') === '宁波城市学院站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '宁波城市学院站' + "</code> <br>";
				} else if (feature.get('name') === '白云桥站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '白云桥站' + "</code> <br>";
				} else if (feature.get('name') === '日丽中路文苑路口站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '日丽中路文苑路口站' + "</code> <br>";
				} else if (feature.get('name') === '南裕新村站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '南裕新村站' + "</code> <br>";
				} else if (feature.get('name') === '南教园区图书馆站') {
				    console.log(feature.get('name'));
				    content.innerHTML = "<code>区域：</code><code>" + '南教园区图书馆站' + "</code> <br>";
				} else {
                    var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

                    content.innerHTML = "<p>你点击了这里：</p><code>" + hdms + "</code>";
                }
                // 弹出popup
                overlay.setPosition(coordinate);
            }


        });
        // 监听鼠标移动事件，鼠标移动到feature区域时变为手形
        map.on('pointermove', function(e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });

        // this.addPoint()

        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'lib/json/data.json',
                format: new ol.format.GeoJSON()
                    // style: styleFunction
            }),
            // features: new GeoJSON().readFeatures('lib/json/test.geojson'),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#122AB5',
                    width: 1
                }),
                fill: new ol.style.Fill({
                    // color: 'rgb(151, 181, 217,0.5)',
                    color: 'rgb(151, 181, 217,0.5)'

                }),
                text: new ol.style.Text({ // 文字样式
                    // text: 'aaa', // 文字内容
                    font: '15px Calibri,sans-serif', // 字体大小
                    stroke: new ol.style.Stroke({ // 文字边界样式
                        color: 'blue', // 文字边界颜色
                        width: 1 // 文字边界宽度
                    }),
                    fill: new ol.style.Fill({ // 文字填充样式
                        color: 'black' // 文字填充颜色
                    })
                })
            }),
        });
        map.addLayer(vector);
        vector.setZIndex(1)

        // 前面的代码我们已经看了很多遍了，关键是下面这段代码
        // 添加一个用于选择Feature的交互方式
        var selectSingleClick = new ol.interaction.Select({
            // API文档里面有说明，可以设置style参数，用来设置选中后的样式，但是这个地方我们注释掉不用，因为就算不注释，也没作用，为什么？
            // style: new ol.style.Style({
            //     image: new ol.style.Circle({
            //         radius: 10,
            //         fill: new ol.style.Fill({
            //             color: 'blue'
            //         })
            //     })
            // })
        });
       
        // 浙大宁波理工学院
        var circle = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform(
                [121.574524, 29.815207], 'EPSG:4326', 'EPSG:3857')),
            name: '浙大宁波理工学院'
        })
		
        circle.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: 'blue'
                })
            })
        }));
        cillayer.getSource().addFeature(circle);
        cillayer.setZIndex(3000);
		//解放南路大梁街口站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.548433,29.870042], 'EPSG:4326', 'EPSG:3857')),
		    name: '解放南路大梁街口站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//开明街站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.552219,29.867517], 'EPSG:4326', 'EPSG:3857')),
		    name: '开明街站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//灵桥西站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.552965,29.861025], 'EPSG:4326', 'EPSG:3857')),
		    name: '灵桥西站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//灵桥东站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.562835,29.865649], 'EPSG:4326', 'EPSG:3857')),
		    name: '灵桥东站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//琴桥东站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.559957,29.861534], 'EPSG:4326', 'EPSG:3857')),
		    name: '琴桥东站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//贺丞路站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.563026,29.856842], 'EPSG:4326', 'EPSG:3857')),
		    name: '贺丞路站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//日月星城站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.551700,29.854821], 'EPSG:4326', 'EPSG:3857')),
		    name: '日月星城站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//永达路站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.559634,29.848258], 'EPSG:4326', 'EPSG:3857')),
		    name: '永达路站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//香格里拉城市花园站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.556561,29.849111], 'EPSG:4326', 'EPSG:3857')),
		    name: '香格里拉城市花园站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//天童北路站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.559634,29.848258], 'EPSG:4326', 'EPSG:3857')),
		    name: '天童北路站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//和邦大厦站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.553435,29.834702], 'EPSG:4326', 'EPSG:3857')),
		    name: '和邦大厦站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//四明中路地铁站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.550613,29.827781], 'EPSG:4326', 'EPSG:3857')),
		    name: '四明中路地铁站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//万达广场站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.550568,29.825783], 'EPSG:4326', 'EPSG:3857')),
		    name: '万达广场站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//华贸外国语学院站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		       [121.550451,29.821752], 'EPSG:4326', 'EPSG:3857')),
		    name: '华贸外国语学院站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//鄞州区政府站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.549656,29.818749], 'EPSG:4326', 'EPSG:3857')),
		    name: '鄞州区政府站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//浙江药科职业大学站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.560891,29.821219], 'EPSG:4326', 'EPSG:3857')),
		    name: '浙江药科职业大学站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//万里学院北站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.566691,29.819784], 'EPSG:4326', 'EPSG:3857')),
		    name: '万里学院北站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//万里学院东站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.567530,29.817281], 'EPSG:4326', 'EPSG:3857')),
		    name: '万里学院东站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//宁波城市学院站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.567986,29.810480], 'EPSG:4326', 'EPSG:3857')),
		    name: '宁波城市学院站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//白云桥站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.564540,29.808842], 'EPSG:4326', 'EPSG:3857')),
		    name: '白云桥站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//日丽中路文苑路口站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.560345,29.809342], 'EPSG:4326', 'EPSG:3857')),
		    name: '日丽中路文苑路口站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//南裕新村站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.555964,29.805233], 'EPSG:4326', 'EPSG:3857')),
		    name: '南裕新村站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);
		//南教园区图书馆站
		var circle = new ol.Feature({
		    geometry: new ol.geom.Point(ol.proj.transform(
		        [121.557732,29.805208], 'EPSG:4326', 'EPSG:3857')),
		    name: '南教园区图书馆站'
		})
		circle.setStyle(new ol.style.Style({
		    image: new ol.style.Circle({
		        radius: 6,
		        fill: new ol.style.Fill({
		            color: 'blue'
		        })
		    })
		}));
		cillayer.getSource().addFeature(circle);
		cillayer.setZIndex(3000);


        // 放大
        $('#zoomIn').click(function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
        })

        // 缩小
        $('#zoomOut').click(function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom - 1);
        })

        // 左移
        $('#toLeft').click(function() {
            var view = map.getView();
            var center = view.getCenter();
            center[0] += 50000;
            view.setCenter(center);
            map.render();
        })

        // 右移
        $('#toRight').click(function() {
            var view = map.getView();
            var center = view.getCenter();
            center[0] -= 50000;
            view.setCenter(center);
            map.render();
        })

        // 上移
        $('#toTop').click(function() {
            var view = map.getView();
            var center = view.getCenter();
            center[1] += 50000;
            view.setCenter(center);
            map.render();
        })

        // 下移
        $('#toBottom').click(function() {
            var view = map.getView();
            var center = view.getCenter();
            center[1] -= 50000;
            view.setCenter(center);
            map.render();
        })

        // // 平移至北京
        // $('#toBeijing').click(function() {
        //     var center = ol.proj.transform([116.20, 39.56], 'EPSG:4326', 'EPSG:3857');
        //     var view = map.getView();
        //     view.setCenter(center);
        //     view.setZoom(9);
        // })
        // function showFill() {
        //     var style = new ol.style.Style({
        //         stroke: new ol.style.Stroke({
        //             color: '#fff',
        //             width: 2
        //         }),
        //         fill: new ol.style.Fill({
        //             color: [38, 155, 0, 0.3]
        //         })
        //     })

        //     $.getJSON('/lib/json/test.geojson', function(data) {
        //         var features = new ol.format.GeoJSON().readFeatures(data);
        //         vectorLayer.getSource().addFeatures(features);
        //         vectorLayer.setStyle(style);
        //     })
        // }

        // map.addLayer(cillayer)

        // // 添加一个用于选择Feature的交互方式
        // map.addInteraction(new ol.interaction.Select({
        //     condition: ol.events.condition.pointerMove, // 唯一的不同之处，设置鼠标移到feature上就选取
        //     style: new ol.style.Style({
        //         image: new ol.style.Circle({
        //             radius: 10,
        //             fill: new ol.style.Fill({
        //                 color: 'pink'
        //             })
        //         })
        //     }),
        //     // 关键： 设置过了条件，可以用feature来写过滤，也可以用layer来写过滤
        //     filter: function(feature, layer) {
        //         return layer !== vector;
        //     }
        // }));
        map.addLayer(cillayer)

        // map.addInteraction(new ol.interaction.Select({
        //     // 设置选中后的style
        //     style: new ol.style.Style({
        //         image: new ol.style.Circle({
        //             radius: 10,
        //             fill: new ol.style.Fill({
        //                 color: 'red'
        //             })
        //         }),
        //         test: new ol.style.Text({
        //             test: 'aaa'
        //         })
        //     }),
        //     // 关键： 设置过了条件， 可以用feature来写过滤， 也可以用layer来写过滤
        //     // filter: function(feature, layer) {
        //     //     return layer === cillayer;
        //     // }
        // }));

        // snap interaction - 鼠标捕捉
        // new ol.interaction.Snap({
        //     features: 要素集(ol.Collection),
        //     pixelTolerance: 捕捉发生的距离，像素数，默认为，
        //     source: 具有捕捉功能的图层(ol.source.Vector)
        // })
        // var styleFunction = function(feature) {
        //     return new ol.style.Style({
        //         stroke: new ol.style.Stroke({
        //             color: feature.get('stroke'), //通过要素拿到具体的值
        //             width: 2,
        //             opacity: 1
        //         }),
        //         fill: new ol.style.Fill({
        //             color: colorRgba(feature.get('fill'), feature.get('fill-opacity')),
        //             ///opacity: feature.get('fill-opacity')
        //         }),
        //         text: new ol.style.Text({
        //             text: feature.get('name'),
        //             font: '12px bold serif',
        //             fill: new ol.style.Fill({
        //                 color: '#000'
        //             }),
        //             stroke: new ol.style.Stroke({
        //                 color: '#fff',
        //                 width: 2
        //             })
        //         })
        //     })
        // };
        // viewer.screenSpaceEventHandler.setInputAction(function(movement) {
        //     //获取鼠标移动后停留位置坐标
        //     let ifcartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
        //     if (ifcartesian) {
        //         let ball = Cesium.Ellipsoid.WGS84.cartesianToCartographic(ifcartesian);
        //         Y_String = Cesium.Math.toDegrees(ball.latitude);
        //         X_String = Cesium.Math.toDegrees(ball.longitude);
        //         let high = viewer.scene.globe.getHeight(ball)
        //         pointPosition = Cesium.Cartesian3.fromDegrees(X_String, Y_String, high);
        //     }
        //     let endPosition = [pointPosition.x, pointPosition.y];
        //     //根据是否在多边形内部，在哪个多边形内部进行材质上色
        //     if (isInPolygon(endPosition, polygon_point[0])) {
        //         //高亮效果
        //     }
        // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        // //检测点是否在多边形内部，返回T/F
        // function isInPolygon(checkPoint, polygonPoints) {
        //     var counter = 0;
        //     var i;
        //     var xinters;
        //     var p1, p2;
        //     var pointCount = polygonPoints.length;
        //     p1 = polygonPoints[0];
        //     for (i = 1; i <= pointCount; i++) {
        //         p2 = polygonPoints[i % pointCount];
        //         if (
        //             checkPoint[0] > Math.min(p1[0], p2[0]) &&
        //             checkPoint[0] <= Math.max(p1[0], p2[0])
        //         ) {
        //             if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
        //                 if (p1[0] != p2[0]) {
        //                     xinters =
        //                         (checkPoint[0] - p1[0]) *
        //                         (p2[1] - p1[1]) /
        //                         (p2[0] - p1[0]) +
        //                         p1[1];
        //                     if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
        //                         counter++;
        //                     }
        //                 }
        //             }
        //         }
        //         p1 = p2;
        //     }
        //     if (counter % 2 == 0) {
        //         return false;
        //     } else {
        //         return true;
        //     }
        // };
        // var viewer = new Cesium.Viewer('cesiumContainer');
        // var highlightedEntity;
        // var highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
        // var normalColor = Cesium.Color.YELLOW.withAlpha(0.6);

        // //一种属性，如果实体当前被鼠标悬停，则返回高亮显示颜色，否则返回默认颜色.
        // function createCallback(entity) {
        //     var colorProperty = new Cesium.CallbackProperty(function(time, result) {
        //         if (highlightedEntity === entity) {
        //             return Cesium.Color.clone(highlightColor, result);
        //         }
        //         return Cesium.Color.clone(normalColor, result);
        //     }, false);

        //     return new Cesium.ColorMaterialProperty(colorProperty);
        // }

        // //这块写自己的json路径	
        // var promise = Cesium.GeoJsonDataSource.load('lib/json/test.geojson'); // , {            clampToGround: true}
        // viewer.dataSources.add(promise);
        // viewer.flyTo(promise);
        // promise.then(function(dataSource) {
        //     viewer.dataSources.add(dataSource);

        //     //获取实体数组
        //     var entities = dataSource.entities.values;
        //     for (var i = 0; i < entities.length; i++) {
        //         var entity = entities[i];
        //         entity.polygon.material = createCallback(entity);
        //     }
        // }).otherwise(function(error) {
        //     //显示加载时遇到的任何错误.
        //     window.alert(error);
        // });

        // var scene = viewer.scene;
        // var handler = viewer.screenSpaceEventHandler;
        // handler.setInputAction(function(movement) {
        //     var pickedObject = scene.pick(movement.endPosition);
        //     if (Cesium.defined(pickedObject) && pickedObject.id instanceof Cesium.Entity) {
        //         highlightedEntity = pickedObject.id;
        //     } else {
        //         highlightedEntity = undefined;
        //     }

        // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);



        // const iconFeature = new Feature({
        //     geometry: new Point([112, 30]),
        //     name: 'Null Island',
        //     population: 4000,
        //     rainfall: 500,
        // });
        // const iconStyle = new Style({
        //     image: new Icon({
        //         anchor: [0.5, 46],
        //         anchorXUnits: 'fraction',
        //         anchorYUnits: 'pixels',
        //         src: 'data/icon.png',
        //     }),
        // });
        // iconFeature.setStyle(iconStyle);
        // const vectorSource = new VectorSource({
        //     features: [iconFeature],
        // });

        // const vectorLayer = new VectorLayer({
        //     source: vectorSource,
        // });
        // const element = document.getElementById('popup');

        // const popup1 = new Overlay({
        //     element: element,
        //     positioning: 'bottom-center',
        //     stopEvent: false,
        // });
        // map.addOverlay(popup1);

        // // display popup on click
        // map.on('click', function(evt) {
        //     const feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
        //         return feature;
        //     });
        //     if (feature) {
        //         popup.setPosition(evt.coordinate);
        //         $(element).popover({
        //             placement: 'top',
        //             html: true,
        //             content: feature.get('name'),
        //         });
        //         $(element).popover('show');
        //     } else {
        //         $(element).popover('dispose');
        //     }
        // });

        // // change mouse cursor when over marker
        // map.on('pointermove', function(e) {
        //     const pixel = map.getEventPixel(e.originalEvent);
        //     const hit = map.hasFeatureAtPixel(pixel);
        //     map.getTarget().style.cursor = hit ? 'pointer' : '';
        // });
        // // Close the popup when the map is moved
        // map.on('movestart', function() {
        //     $(element).popover('dispose');
        // });
    </script>
</body>

</html>